<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once指令</title>
  <script src="vue.js"></script>

</head>
<body>
<!--
    v-once:
        1.v-once所在的节点在初次动态渲染后，被视为静态内容
        2.以后数据的改变不会引起v-once所在的结构的更新，可以用于优化性能



-->
<div id="root">
  <div v-once>初始化的n：{{n}}</div>
  <div >当前n：{{n}}</div>
<button @click="n++">add</button>

</div>
</body>
<script type="text/javascript">
  new Vue({
    el:'#root',
    data:{
      name:"hello",
        str:"<h1>hello</h1>",
        n:0
    }
  })

</script>
</html>